<script setup lang="ts">
import ECharts from "../Echarts/index.vue";
import { deviceState, overall, devicelist, plotdetection, plotdefect, recentresult } from "@/utils/api"
import { onMounted, provide, ref, toRaw } from "vue";
import { delay, rpx, rpxh } from "@/utils/myTools";
// 设备状态
let datastatus: any = ref([])
// 统计信息
let dataoveral: any = ref([])
//设备列表
let dataList: any = ref([])
// 检测次数趋势
let datadetection: any = ref()
// 缺陷数量趋势
let plotdefec: any = ref()
// 最近检测结果
let List: any = ref();
// 状态 1:空闲  2：检测中 3：未连接
let leisure = ref([])
let detecting = ref([])
let unconnected = ref([])
const status = () => {
  const data = deviceState();
  return data
}
const dataoverall = () => {
  const data = overall();
  return data
}
const datalist = () => {
  const data = devicelist();
  return data;
}
const data = async () => {
  const p1 = await plotdetection()
  return p1
}
const datat = async () => {
  const p1 = await plotdefect()
  return p1
}
const list = async () => {
  const p1 = await recentresult();
  return p1;
}
onMounted(async () => {
  // 设备状态
  const p1 = await status();
  datastatus.value = p1.data.状态;
  leisure.value = datastatus.value.filter(value => value.状态 === 1)
  detecting.value = datastatus.value.filter(value => value.状态 === 2)
  unconnected.value = datastatus.value.filter(value => value.状态 === 3)
  // 统计信息
  const p2 = await dataoverall();
  dataoveral.value = fn(p2.data)
  // 设备名称列表
  const p3 = await datalist();
  dataList.value = p3.data.设备列表
  // 趋势
  const dat = await data();
  datadetection.value = dat.data.检测次数趋势
  // 缺陷数量趋势
  const da = await datat();
  plotdefec.value = da.data.缺陷数量趋势
  // 最近检测结果
  const JC = await list();
  List.value = JC.data.最新检测记录
  console.log(List.value, JC.data.最新检测记录)

})
const fn = (obj: any) => {
  for (const key in obj) {
    if (typeof obj[key] === 'number') {
      if (obj[key] >= 10 && obj[key] < 100) {
        obj[key] = `0${Math.floor(obj[key])}`;
      } else if (obj[key] >= 100) {
        obj[key] = `${obj[key]}`;
      } else if (obj[key] >= 1 && obj[key] < 10) {
        obj[key] = `00${obj[key]}`;
      }
    }
  }
  return obj;
}
const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen(); // 进入全屏模式
  } else {
    document.exitFullscreen(); // 退出全屏模式
  }
}
</script>
<template>

  <div>
    <div class="bg">
      <FullScreen style="width: 20px;height: 20px;position: fixed;right: 1%;top: 1px;" @click="toggleFullScreen" />
      <div>
        <div :style="{ height: rpxh(120) }"></div>
      </div>
      <div class="content">

        <div class="left">
          <div class="lt">
            <div class="sbzt"></div>
            <div class="flex">
              <div :style="{ width: rpx(117) }">
                <div class="one"></div>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <div style="color: #fff;">空闲中:</div>
                  <div class="sizeone">{{ leisure.length }}</div>
                </div>
              </div>
              <div :style="{ width: rpx(117) }">
                <div class="two"></div>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <div style="color: #fff;">检测中:</div>
                  <div class="sizetwo">{{ detecting.length }}</div>
                </div>
              </div>
              <div :style="{ width: rpx(117) }">
                <div class="there"></div>
                <div style="display: flex;justify-content: center;align-items: center;">
                  <div style="color: #fff;">未连接:</div>
                  <div class="sizethere">{{ unconnected.length }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="lb">
            <div class="sbzt"></div>
            <div class="for">
              <div v-for="(value, key) in dataoveral" style="color: #fff;">
                <div class="item">
                  <div class="itemsize">{{ key }}</div>
                  <div :style="{ gap: rpx(4), display: 'flex' }">
                    <div v-for="i in String(value).split('')" class="itemborder">
                      {{ i }}
                    </div>
                  </div>


                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="center">
          <div class="sbmc">设备名称</div>
          <div class="ct">
          
            <div v-for="(item, index) in dataList" :key="item.id" class="item">
              <div class="ab">
                <div>{{ item.名称 }}</div>
                <!-- 循环接口 -->
                <div>
                  <div v-for="(ite, index) in datastatus" :key="item.id">
                    <div v-if="ite.id === item.id">
                      <!-- {{ ite.状态 }} -->
                      <div style="color:#FFDE54 ;" v-if="ite.状态 === Number(1)">
                        空闲中
                      </div>
                      <div style="color: #21ED91;" v-if="ite.状态 === Number(2)">
                        检测中
                      </div>
                      <div style="color: #54EAFF;" v-if="ite.状态 === Number(3)">
                        未连接
                      </div>

                    </div>
                  </div>
                </div>


              </div>
            </div>
          </div>
          <div class="cc">
            <ECharts :da="datadetection" :d="plotdefec"></ECharts>
          </div>
          <div class="cb">
            <div>系统设置</div>
            <div>数据管理</div>

          </div>
        </div>
        <div class="right ">
          <div class="jg"></div>
          <div class="list">

            <div v-for="(ite, inde) in List" :key="ite.id">
              <div v-for="(item, index) in dataList" :key="item.id">
                <div class="name" v-if="item.id === ite.id" style="overflow-y: auto;">
                  <!-- 标题 设备名昵称 -->
                  <div
                    :style="{ height: rpxh(40), marginLeft: rpx(10), gap: rpx(10), color: '#54EAFF', display: 'flex', alignItems: 'center', lineHeight: rpxh(40) }">
                    <div :style="{ width: rpx(8), height: rpxh(10), backgroundColor: '#54EAFF' }"></div>
                    <div>{{ item.名称 }}</div>
                  </div>
                  <div style="display: flex;">
                    <div class="div">
                      <div>&nbsp; 终止原因：</div>
                      <div style="color: #54EAFF;" v-if="ite.终止原因 === 1">
                        检测完成
                      </div>
                      <div style="color: #54EAFF;" v-if="ite.终止原因 === 2">
                        人工终端
                      </div>
                      <div style="color: #54EAFF;" v-if="ite.终止原因 === 3">
                        设备故障
                      </div>
                    </div>
                    <div
                      :style="{ height: rpxh(20), marginLeft: rpx(10), lineHeight: rpxh(20), gap: rpx(10), display: 'flex', alignItems: 'center', borderLeft: '1px solid #ccc', color: '#fff', marginTop: rpx(10) }">
                      <div>&nbsp; 缺陷总数：</div>
                      <div style="color: #54EAFF;">
                        {{ ite.缺陷总数 }}
                      </div>
                    </div>

                  </div>
                  <div class="div">
                    <div>&nbsp; 异常个数：</div>
                    <div style="color: #54EAFF;">
                      {{ ite.异常个数 }}
                    </div>

                  </div>
                  <div
                    :style="{ height: rpxh(20), marginLeft: rpx(10), gap: rpx(10), display: 'flex', alignItems: 'center', borderLeft: '1px solid #ccc', lineHeight: rpxh(20), color: '#fff', marginTop: rpx(10) }">
                    <div>&nbsp; 异常个数：</div>
                    <div style="color: #54EAFF;">
                      {{ ite.开始时间 }}
                    </div>

                  </div>
                  <div style="display: flex;">
                    <div class="div">
                      <div>&nbsp; 断裂个数：</div>
                      <div style="color: #54EAFF;">
                        {{ ite.断裂个数 }}
                      </div>
                    </div>
                    <div
                      :style="{ height: rpxh(20), marginLeft: rpx(10), gap: rpx(10), display: 'flex', alignItems: 'center', borderLeft: '1px solid #ccc', color: '#fff', marginTop: rpx(10) }">
                      <div>&nbsp; 持续时间</div>
                      <div style="color: #54EAFF;">
                        {{ ite.断裂个数 }}
                      </div>
                    </div>

                  </div>
                  <div
                    :style="{ height: rpxh(20), marginLeft: rpx(10), gap: rpx(10), display: 'flex', alignItems: 'center', borderLeft: '1px solid #ccc', color: '#fff', lineHeight: rpxh(20), marginTop: rpx(10) }">
                    <div>&nbsp; 异常个数：</div>
                    <div style="color: #54EAFF;">
                      {{ ite.结束时间 }}
                    </div>
                  </div>
                  <div style="display: flex;">
                    <div class="div">
                      <div>&nbsp; 抽动个数：</div>
                      <div style="color: #54EAFF;">
                        {{ ite.抽动个数 }}
                      </div>
                    </div>
                    <div
                      :style="{ height: rpxh(20), marginLeft: rpx(10), gap: rpx(10), display: 'flex', alignItems: 'center', borderLeft: '1px solid #ccc', color: '#fff', marginTop: rpx(10) }">
                      <div>&nbsp; 持续时间：</div>
                      <div style="color: #54EAFF;">
                        {{ ite.接头个数 }}
                      </div>
                    </div>

                  </div>
                  <div style="display: flex;">
                    <div class="div">
                      <div>&nbsp; 需要观察的接头数：</div>
                      <div style="color: #54EAFF;">
                        {{ ite.需要观察的接头数 }}
                      </div>
                    </div>
                    <div
                      :style="{ lineHeight: rpxh(20), height: rpxh(20), marginLeft: rpx(10), gap: rpx(10), display: 'flex', alignItems: 'center', borderLeft: '1px solid #ccc', color: '#fff', marginTop: rpx(10) }">
                      <div>&nbsp; 需要修补的接头数:</div>
                      <div style="color: #54EAFF;">
                        {{ ite.需要修补的接头数 }}
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/main.scss";

.bg {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/images/编组 36.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    gap: rpx(20);

    .left {
      width: rpx(426);
      height: rpxh(950);

      .lt {

        height: rpxh(305);

        .sbzt {

          height: rpxh(80);

          background-image: url("@/assets/images/a.png");
          background-size: 100% 50%;
          background-repeat: no-repeat;
        }

        .flex {

          display: flex;
          justify-content: start;

          align-items: center;
          gap: rpx(30);

          .one {
            height: rpxh(99);
            background-image: url("@/assets/images/编组 42.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .two {
            height: rpxh(99);
            background-image: url("@/assets/images/编组 43.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .there {
            height: rpxh(99);
            background-image: url("@/assets/images/编组 44.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .sizeone {
            font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
            font-weight: normal;
            font-size: 25px;
            color: #54EAFF;
            line-height: 24px;
            text-align: right;
            font-style: normal;
          }

          .sizetwo {
            font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
            font-weight: normal;
            font-size: 25px;
            color: #54FF6B;
            line-height: 24px;
            text-align: right;
            font-style: normal;
          }

          .sizethere {
            font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
            font-weight: normal;
            font-size: 25px;
            color: #FFDE54;
            line-height: 24px;
            text-align: right;
            font-style: normal;
          }
        }

      }

      .lb {
        height: rpxh(300);

        .sbzt {

          height: rpxh(80);

          background-image: url("@/assets/images/b.png");
          background-size: 100% 50%;
          background-repeat: no-repeat;
        }

        .for {
          display: flex;
          flex-wrap: wrap;
          gap: rpx(28);

          .item {
            width: rpx(190);
            height: rpxh(70);

            .itemsize {
              font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
              font-weight: normal;
              font-size: 16px;
              color: #FFFFFF;
              line-height: 24px;
              text-align: left;
              font-style: normal;
            }

            .itemborder {
              font-family: SourceHanSansCN, SourceHanSansCN;
              font-weight: bold;
              font-size: 18px;
              font-style: normal;
              display: flex;
              justify-content: center;
              align-items: center;
              width: rpx(48);
              height: rpxh(56);
              margin-top: rpxh(8);
              font-weight: bold;
              background-image: url("@/assets/images/编组 8备份 2.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }
          }
        }
      }
    }

    .center {
      width: rpx(920);
      height: rpxh(950);
      // margin-top: rpxh(50);
.sbmc{
  display: flex;
    justify-content: center;
    align-items: center;
      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.5);
        height: rpxh(50);
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 24px;
        letter-spacing: 2px;
        font-family: AlimamaShuHeiTi-Bold;
        font-weight: bold;
        text-align: right;
        white-space: nowrap;
        line-height: 29px;
        // aspect-ratio: 1;
        //   background: #25b09b;
        //   clip-path: polygon(0 0, 50% 0, 50% 100%);
          
          // animation: l2 2s infinite cubic-bezier(0.3, 1, 0, 1);
}
      .ct {
        height: rpxh(500);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: rpx(10);
        margin-bottom: rpxh(40);

        

        .item {
          width: rpx(300);
          height: rpxh(139);
          align-items: center;
          background-image: url("@/assets/images/编组 2.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          position: relative;
          font-weight: bold;

          .ab {
            width: rpx(150);
            height: rpxh(100);
            position: absolute;
            right: rpx(30);
            top: rpxh(30);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: start;
            font-weight: bold;
          }
        }
      }

      .cc {

        height: rpxh(200);

      }

      .cb {
        height: rpxh(200);
        display: flex;
        justify-content: end;
        align-items: center;
        gap: rpx(20);

        div {
          width: rpx(150);
          height: rpxh(50);
          background-image: url("@/assets/images/编组 4.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          color: #fff;
        }
      }
    }

    .right {
      width: rpx(460);
      height: rpxh(950);
      margin-left: rpx(20);

      .list {
        height: rpxh(900);
        overflow-y: auto;
      }

      .list::-webkit-scrollbar {
        // z-index: 999;
        display: none;
      }

      .jg {
        margin-bottom: rpxh(30);
        height: rpxh(40);
        background-image: url("@/assets/images/jg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .name {

        height: rpxh(275);
        padding-left: rpx(5);
        background-image: url("@/assets/images/矩形备份 9.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-bottom: rpxh(20);
      }

      .div {
        width: rpx(235);
        height: rpxh(20);
        margin-left: rpx(10);
        gap: rpx(10), ;
        display: flex, ;
        align-items: center;
        border-left: 1px solid #ccc;
        line-height: rpxh(20);
        color: #fff;
        margin-top: rpx(10)
      }
    }
  }
}



.fl {
  display: flex;
  flex-direction: column;
}
</style>